.router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
}
.router-fade-enter-from, .router-fade-leave-to {
    opacity: 0;
}
.loading-fade-enter-active, .loading-fade-leave-active {
    transition: opacity 1s;
}
.loading-fade-enter-from, .loading-fade-leave-to {
    opacity: 0;
}

/*新元素过渡开始状态，和当前元素离开时生效*/
.show-list-enter-from,.show-list-leave-to{
  transform: translateY(-100%);
}
/*新元素进入过渡生效、当前元素离开时生效时的过渡时间*/
.show-list-leave-active,
.show-list-enter-active {
  transition: transform .3s;
}

.mask-fade-enter-active, .mask-fade-leave-active {
    transition: opacity .3s;
}
.mask-fade-enter-from, .mask-fade-leave-to {
    opacity: 0;
}

.detail-show-enter-active,
.detail-show-leave-active {
  transition: all 0.3s ease-in-out;
}
.detail-show-enter-from,
.detail-show-leave-to {
  transform: translateX(100%);
  opacity: 0;
}